<template>
    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
        <h1>JAVA大师</h1>
        <el-form-item label="用户名" prop="userName">
            <el-input type="text" v-model="ruleForm.userName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item :label="'密\xa0\xa0码'" prop="password">
            <el-input type="password" v-model="ruleForm.password" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="验证码" prop="captchaCode">
            <div class="captcha-box">
                <el-input v-model="ruleForm.captchaCode"></el-input>
                <img @click="refreshCaptchaCode" height="40" :src="captchaCodeUrl">
            </div>
        </el-form-item>
        <el-form-item id="login-btn-box">
            <el-button class="login-btn" type="primary" @click="submitForm('ruleForm')">登录</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import {validateUsername} from "@/utils/validate";
    import {CaptchaCodeApi, LoginApi} from "@/utils/api";
    export default {
        name: "Login",
        data(){
            return{
                captchaCodeUrl:'',
                ruleForm:{
                    userName:'admin',
                    password:'123',
                    captchaCode:''
                },
                rules:{
                    userName:[{
                        required:true,
                        message:'用户名不能为空',
                        trigger:'blur'
                    },
                    {
                        validator:validateUsername,trigger: 'blur'
                    }
                    ],
                    password:{
                        required:true,
                        message:'密码不能为空',
                        trigger:'blur'
                    },
                    captchaCode:{
                        required:true,
                        message:'验证码不能为空',
                        trigger:'blur'
                    }
                }
            }
        },
        methods:{
            submitForm(formName){
                this.$refs[formName].validate(async (valid) => {
                    if (valid) {
                        let  rep =await LoginApi({
                            userName:this.ruleForm.userName,
                            password:this.ruleForm.password,
                            verifyCode:this.ruleForm.captchaCode
                        });

                        if(!rep){
                            return ;
                        }
                        localStorage.setItem('login-token',rep.data.token);
                        this.$router.push('/');
                    } else {
                        this.$message.warning('请输入正确的信息');
                        return false;
                    }
                });
            },
           async refreshCaptchaCode(){
                let  rep =await CaptchaCodeApi();
               if(!rep){
                   return ;
               }
               this.captchaCodeUrl=rep.data.base64;

            }
        },
        created() {
            CaptchaCodeApi().then((rep)=>{
                this.captchaCodeUrl=rep.data.base64;
            });
        }
    }
</script>

<style  scoped>
    .demo-ruleForm{/*居中登录页面*/
        width: 400px;
        background-color: aliceblue;
        position: absolute;
        left: 50%;
        top:50%;
        transform: translate(-50%,-50%);
        padding-top: 20px;
        padding-right: 40px;

    }
    h1{/*居中标题*/
        text-align: center;
        margin-bottom: 20px;
        padding-left: 40px;
        font-size: 20px;
    }
    .captcha-box{
        display: flex;
    }
    #captchaCodeImg{
        margin-left: 20px;
    }
    .login-btn{
        width: 100%;
    }
    ::v-deep #login-btn-box .el-form-item__content{/*覆盖饿了么样式*/
        margin-left: 40px!important;
    }

</style>